<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #C3BED4;
        }

        .mDiv {
            width: 300px;
            height: 3000px;
            background: #FFFEA0;
        }

        #fix {
            width: 600px;
            height: 200px;
            position: fixed;
            right: 0;
            top: 0;
            background: #BA874C;
        }
    </style>
</head>

<body>
    <div class="mDiv">

    </div>
    <div id="fix">
        <table>

            <tr>

                <td>pageX:
                    <span id="pageX"></span>
                </td>

                <td>clientX:
                    <span id="clientX"></span>
                </td>

                <td>scrollLeft:
                    <span id="scrollLeft"></span>
                </td>

                <td>screenX:
                    <span id="screenX"></span>
                </td>

                <td>offsetX:
                    <span id="offsetX"></span>
                </td>

                <td>layerX:
                    <span id="layerX"></span>
                </td>

            </tr>

            <tr>

                <td>pageY:
                    <span id="pageY"></span>
                </td>

                <td>clientY:
                    <span id="clientY"></span>
                </td>

                <td>scrollTop:
                    <span id="scrollTop"></span>
                </td>

                <td>screenY:
                    <span id="screenY"></span>
                </td>

                <td>offsetY:
                    <span id="offsetY"></span>
                </td>

                <td>layerY:
                    <span id="layerY"></span>
                </td>

            </tr>



        </table>

    </div>
    <script>
        var $ = function (id) {

            return ("string" == typeof id) ? document.getElementById(id) : id;

        };


        var mDiv = document.querySelectorAll(".mDiv");
        var fix = document.getElementById("fix");
        mDiv[0].addEventListener("mousemove", function (e) {
            test(e);
        });

        mDiv[0].addEventListener("click", function (e) {
            console.log(window.event)
            console.log(e);
        });

        function test(e) {
            e = e || window.event;

            //IE

            var doc = document.documentElement;

            //chrome

            var body = document.body;

            $("pageX").innerHTML = e.pageX;

            $("pageY").innerHTML = e.pageY;

            $("clientX").innerHTML = e.clientX;

            $("clientY").innerHTML = e.clientY;

            $("screenX").innerHTML = e.screenY;

            $("screenY").innerHTML = e.screenY;

            $("scrollTop").innerHTML = doc && doc.scrollTop;

            $("scrollLeft").innerHTML = doc && doc.scrollLeft;

            $("offsetX").innerHTML = e.offsetX;

            $("offsetY").innerHTML = e.offsetY;

            $("layerX").innerHTML = e.layerX;

            $("layerY").innerHTML = e.layerY;
        }

    </script>
</body>

</html>